import { ElMessage } from 'element-plus'

let messageHandler

export const messageClose = () => {
  ElMessage.closeAll()
  messageHandler && messageHandler.close()
  messageHandler = null
}

export class ToastUtils {
  static show(message: string) {
    messageClose()

    messageHandler = ElMessage({
      duration: 1200,
      customClass: 'app-toast',
      message
    })
  }
  static success(message: string) {
    messageClose()

    messageHandler = ElMessage({
      duration: 1200,
      customClass: 'app-toast is_success',
      dangerouslyUseHTMLString: true,
      message: `
      <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g transform="translate(-570.000000, -544.000000)">
              <g transform="translate(570.000000, 520.000000)">
                <g transform="translate(0.000000, 24.000000)">
                  <rect x="0" y="0" width="16" height="16" />
                  <path
                    d="M8,15 C4.13391984,15 1,11.8660802 1,8 C1,4.13391984 4.13391984,1 8,1 C11.8660802,1 15,4.13391984 15,8 C15,11.8660802 11.8660802,15 8,15 L8,15 Z M12.2314761,9.85571848 L6.54662757,4.32277615 C6.37556207,4.15171065 6.09775171,4.15171065 5.92668622,4.32277615 L3.75483871,6.39882698 C3.58377322,6.56989247 3.58377322,6.84770283 3.75483871,7.01876833 L3.75483871,7.01876833 C3.9259042,7.18983382 4.20371457,7.18983382 4.37478006,7.01876833 L6.23734115,5.25200391 L11.6115347,10.4756598 C11.7826002,10.6467253 12.0604106,10.6467253 12.2314761,10.4756598 L12.2314761,10.4756598 C12.4025415,10.3045943 12.4025415,10.026784 12.2314761,9.85571848 L12.2314761,9.85571848 Z"
                    fill="#29CC5F"
                    transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) "
                  />
                </g>
              </g>
            </g>
          </g>
        </svg>
        <span>${message}</span>
      `
    })
  }

  static showError(message: string) {
    messageClose()

    messageHandler = ElMessage({
      duration: 1200,
      customClass: 'app-toast is_error',
      dangerouslyUseHTMLString: true,
      message: `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="全局提示" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="收款-复制说明" transform="translate(-920.000000, -532.000000)">
              <g id="编组" transform="translate(905.000000, 456.000000)">
                  <g id="失败" transform="translate(0.000000, 64.000000)">
                      <g id="icon失败" transform="translate(15.000000, 12.000000)">
                          <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
                          <path d="M8,1 C11.8660802,1 15,4.13391984 15,8 C15,11.8660802 11.8660802,15 8,15 C4.13391984,15 1,11.8660802 1,8 C1,4.13391984 4.13391984,1 8,1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,4.97631073 5.17157288,5.17157288 C4.97631073,5.36683502 4.97631073,5.68341751 5.17157288,5.87867966 L5.17157288,5.87867966 L7.293,8 L5.17157288,10.1213203 C4.99800652,10.2948867 4.97872137,10.5643111 5.11371742,10.7591792 L5.17157288,10.8284271 C5.36683502,11.0236893 5.68341751,11.0236893 5.87867966,10.8284271 L5.87867966,10.8284271 L8,8.707 L10.1213203,10.8284271 C10.2948867,11.0019935 10.5643111,11.0212786 10.7591792,10.8862826 L10.8284271,10.8284271 C11.0236893,10.633165 11.0236893,10.3165825 10.8284271,10.1213203 L10.8284271,10.1213203 L8.707,8 L10.8284271,5.87867966 C11.0019935,5.7051133 11.0212786,5.4356889 10.8862826,5.24082076 L10.8284271,5.17157288 C10.633165,4.97631073 10.3165825,4.97631073 10.1213203,5.17157288 L10.1213203,5.17157288 L8,7.293 Z" fill="#F54D4E" transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) "></path>
                      </g>
                  </g>
              </g>
          </g>
      </g>
  </svg>
  <span>${message}</span>
  `
    })
  }

  static error = ToastUtils.showError

  static loading(message: string) {
    messageClose()

    messageHandler = ElMessage({
      duration: 0,
      customClass: 'app-toast is_loading',
      dangerouslyUseHTMLString: true,
      message: `
        <svg class="animate-spin" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>icon加载中</title>
            <g id="全局提示" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-920.000000, -660.000000)" id="编组">
                    <g transform="translate(905.000000, 456.000000)">
                        <g id="成功" transform="translate(0.000000, 192.000000)">
                            <g id="icon加载中" transform="translate(15.000000, 12.000000)">
                                <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
                                <path d="M8,15 C4.13391984,15 1,11.8660802 1,8 C1,4.13391984 4.13391984,1 8,1 C11.8660802,1 15,4.13391984 15,8 C15,11.8660802 11.8660802,15 8,15 L8,15 Z M8,14 C4.68621701,14 2,11.313783 2,8 C2,4.68621701 4.68621701,2 8,2 C11.313783,2 14,4.68621701 14,8 C14,11.313783 11.313783,14 8,14 L8,14 Z" fill="#7670FF" transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) "></path>
                                <path d="M8,1 C11.8660802,1 15,4.13391984 15,8 L15,8 L14,8 L14,8 C14,4.68621701 11.313783,2 8,2 Z" id="形状结合" fill="#FFFFFF"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </svg>
        <span>${message}</span>
        `
    })
    return messageHandler
  }
}

export default ToastUtils
